<script setup>
import {Search,Edit,Delete} from "@element-plus/icons-vue";
import {ref,reactive} from "vue";
import request from "@/utils/request.js";
const name = ref('');

const data = reactive({
  total:  20,
  currentPage :  1,
  pageSize : 10,
  tableData : [],
  dialogVisibleFlag:false,
  form:{
    id:'',
    name:'',
    password:'',
  },
  ids:[]
})

const loadData = () => {
  request.get('admin/selectPage',{
    params:{

      pageNum:data.currentPage,
      pageSize:data.pageSize,
      name:name.value,
    }
  }).then(res=>{
    data.tableData = res.data.list;
    data.total = res.data.total;
    console.log(data.tableData);
    console.log(res.data);
  })
}
loadData();
const reset = () => {
  name.value = '';
  loadData();
}
const handleAdd = () => {
  data.dialogVisibleFlag = true;
  data.form = {}
}
const handleEdit = (row) => {
  data.dialogVisibleFlag = true;
  // console.log(row)
  //深拷贝一个新的对象 用于编辑 这样不会影响行对象
  data.form = JSON.parse(JSON.stringify(row));

}
const handleDelete = (row) => {
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteData(row);
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });

}
const save = () => {
  const add = () =>{request.post('/admin/add',data.form).then(res=>{
    console.log(res);
    if(res.code === '200'){
      ElMessage.success('添加成功');
      loadData();
      data.dialogVisibleFlag = false;
    }else {
      ElMessage.error(res.code + '/n'
          + res.msg
      );
    }
  })}
  const edit = () =>{request.put('/admin/update',data.form).then(res=>{
    console.log(res);
    if(res.code === '200'){
      ElMessage.success('修改成功');
      loadData();
      data.dialogVisibleFlag = false;
    }else {
      ElMessage.error(res.code + '/n'
          + res.msg
      );
    }
  }) }
    data.form.id ? edit() : add();
}
const deleteData = (row) => {
  request.delete(`admin/delete/${row.id}`).then(res=>{
    console.log(res);
    if(res.code === '200'){
      ElMessage.success('删除成功');
      loadData();
    }else {
      ElMessage.error(res.code + '/n'
          + res.msg
      );
    }

  })
}
const handleSelectionChange = (rows) =>{
  console.log(rows)
  data.ids = rows.map(row=>row.id)
}
const deleteBatch = () =>{
  if(data.ids.length === 0){
    ElMessage.warning('请选择要删除的数据');
    return;
  }
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    request.delete(`admin/deleteBatch`,{ data:data.ids}).then(res=>{

      console.log(res);
      if(res.code === '200'){
        ElMessage.success('删除成功');
        loadData();
      }
    })
  })
}
</script>

<template>
  <el-dialog title="管理员添加" v-model="data.dialogVisibleFlag" style="width: 300px;padding: 10px">
    <el-form>
      <el-form-item label="姓名">
        <el-input v-model="data.form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="data.form.password"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="data.dialogVisibleFlag = false">取 消</el-button>
      <el-button type="primary" @click="save()">确 定</el-button>
    </template>
  </el-dialog>
  <div>
    <!--    data顶部搜索栏开始-->
    <div class="card" style = "margin-bottom:5px;  display: flex" >
      <el-input placeholder="名称搜索" v-model="name"  style = "width:240px; margin-right: 5px" :prefix-icon="Search" />
      <el-button type="primary" :icon="Search" circle @click="loadData()"></el-button>
      <el-button type="warning" @click="reset()">重置</el-button>
    </div>
    <!--    data顶部搜索栏结束-->

    <!--    data第二栏操作栏开始-->
    <div class="card" style = "margin-bottom: 5px;">
      <el-button type="primary" style = "margin-left: 5px" @click="handleAdd()">新增</el-button>
      <el-button type="danger" style = "margin-left: 13px" @click="deleteBatch()">批量删除</el-button>

    </div>

    <!--    data第二栏操作栏结束-->

    <!--    data中部数据表格栏开始-->
    <el-table
        :data="data.tableData"
        @selection-change="handleSelectionChange"
        border
        style="width:100%"
        stripe
    >
      <el-table-column
          width="60"
          type="selection"
          prop="isSelect"
          label="选中"
          />

      <el-table-column

          prop="id"
          label="编号"
      />
      <el-table-column
          prop="name"
          label="姓名"
      />
      <el-table-column
          prop="password"
          label="密码"
      />
      <el-table-column
          fixed="right"
          label="操作"
          width="150">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)" :icon="Edit" circle></el-button>
          <el-button type="danger" size="small" :icon="Delete" circle @click="handleDelete(scope.row)"></el-button>
        </template>
      </el-table-column>

    </el-table>
    <!--    data中部数据表格栏结束-->

    <!--    data底部分页组件开始-->
    <div class ="card" style="margin-top: 5px">
      <el-pagination
          @size-change = "loadData()"
          @current-change = "loadData()"
          :total = "data.total"
          v-model:current-page="data.currentPage"
          v-model:page-size="data.pageSize"
          :page-sizes="[ 5,10,15,20]"
          layout = "total, sizes, prev, pager, next, jumper"
          background
      />

    </div>
    <!--    data底部分页组件结束-->

  </div>

</template>

